<!DOCTYPE html>
<link rel="match" href="../expected/color-hsl-ref.html" />
<style>
    html { background-color: white; }
    div {
        width: 200px;
        height: 20px;
    }
    #d1 { background-color: hsla(120.0, 75%, 50%, 20%); }
    #d2 { background-color: hsla(120, 75%, 50%, 0.6); }
    #d3 { background-color: hsla(120 75% 50% / 60%); }
    #d4 { background-color: hsla(120.0 75% 50% / 1.0); }
    #d5 { background-color: hsla(120.0, 75%, 50%); }
    #d6 { background-color: hsla(120 75% 50%); }
    #d7 { background-color: hsl(120, 75%, 50%, 0.2); }
    #d8 { background-color: hsl(120, 75%, 50%, 60%); }
    #d9 { background-color: hsl(120 75% 50% / 0.6); }
    #d10 { background-color: hsl(120 75% 50% / 60%); }
    #d11 { background-color: hsl(600deg, 75%, 50%); }
    #d12 { background-color: hsl(2.6666666666turn, 75%, 50%); }
    #d13 { background-color: hsl(1.2e2, 75%, 50%, 0.6); }
    #d14 { background-color: hsla(540, 100%, 50%, 0.6); }
    #d15 { background-color: hsl(none none none / none); }
    #d16 { background-color: hsl(none 100% 50%); }
    #d17 { background-color: hsl(120 none 50%); }
    #d18 { background-color: hsl(120 80% none); }
    #d19 { background-color: hsl(120 100% 50% / none); }
</style>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
<div id="d5">5</div>
<div id="d6">6</div>
<div id="d7">7</div>
<div id="d8">8</div>
<div id="d9">9</div>
<div id="d10">10</div>
<div id="d11">11</div>
<div id="d12">12</div>
<div id="d13">13</div>
<div id="d14">14</div>
<div id="d15">15</div>
<div id="d16">16</div>
<div id="d17">17</div>
<div id="d18">18</div>
<div id="d19">19</div>
